<template>
  <ul class="form-type-list">
    <li v-for="item in list" :key="item.name" @click="addHandler(item)">
      <i :class="item.icon"></i>
      <span>
        {{ item.name }}
      </span>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { useFormStore } from '@/stores'
const store = useFormStore()
const list = ref([
  {
    type: 'text',
    name: '文本框',
    icon: 'icon-icon-park-outline:add-text'
  },
  {
    type: 'number',
    name: '数字框',
    icon: 'icon-icon-park-outline:list-numbers'
  },
  {
    type: 'select',
    name: '下拉选择框',
    icon: 'icon-icon-park-outline:list-middle'
  }
])

function addHandler({ name, type }: any) {
  store.addFormItem({ type, name })
}
</script>
<style scoped lang="scss">
.form-type-list {
  @apply grid grid-cols-2 w-60 p-2 gap-4 h-full bd-r h-full;
  li {
    @apply bd h-8 rounded text-center cursor-pointer select-none;
    @apply flex items-center justify-center gap-1;
    i {
      @apply text-sm;
    }
  }
}
</style>
